<template>
  <el-form style="margin-top: 10px" :model="model" :rules="rules" ref="ruleForm" label-width="115px"
           class="demo-ruleForm el-form-col">
    <Portlet title="异常处理">
      <el-row v-for="(item, index) in model.chAbnormalSchemes" :key="index">
        <el-col :span="6">
          <el-form-item label="处理方案:"
                        :prop="'chAbnormalSchemes.' + index + '.abnormalSchemeCode'"
                        :rules="[{ required: true, message: '请选择处理方案！', trigger: 'change' }]"
          >
            <el-select v-model="item.abnormalSchemeCode"
                       placeholder="请选择">
              <el-option v-for="p in abnormalSchemeCodeArr"
                         :key="p.value"
                         :label="p.text"
                         :value="p.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="处理描述:"
                        :prop="'chAbnormalSchemes.' + index + '.abnormalRemark'"
                        :rules="[{ required: true, max: 100, message: '请输入1~100字内描述', trigger: 'blur' }]"
          >
            <el-input v-model="item.abnormalRemark"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button style="width:100%" @click="del(model.chAbnormalSchemes, index)">删除</el-button>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button style="width:100%" @click="add" type="primary">添加</el-button>
        </el-col>
      </el-row>
    </Portlet>
    <Portlet title="异常费用">
      <span slot="tools" style="color: #FF0000">费用金额正数为收，负数为支</span>
      <el-row class="row" v-for="(item, index) in model.abnormalCosts" :key="index">
        <el-col :span="6">
          <el-form-item label="费用名称:"
                        :prop="'abnormalCosts.' + index + '.costNo'"
                        :rules="[{ required: true, message: '请选择费用名称！', trigger: 'change' }]"
          >
            <el-select v-model="item.costNo"
                       placeholder="请选择">
              <el-option v-for="p in abnormalCostsArr"
                         :key="p.value"
                         :label="p.text"
                         :value="p.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="费用金额:"
                        :prop="'abnormalCosts.' + index + '.costMoney'"
                        :rules="[
                          { required: true, message: '请输入定价价格', trigger: 'blur' },
                          { validator: isFormatNumber, int: 7, decimal: 2, message: '输入8位以下整数或2位小数', trigger: 'blur' }
                          ]"
          >
            <el-input v-model="item.costMoney">
              <span slot="suffix">元</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="费用备注:"
                        :prop="'abnormalCosts.' + index + '.costRemark'"
                        :rules="[{ required: true, max: 100, message: '请输入1~100字内备注', trigger: 'blur' }]"
          >
            <el-input v-model="item.costRemark"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button style="width:100%" @click="delFee(model.abnormalCosts, index)">删除</el-button>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button style="width:100%" @click="addFee" type="primary">添加</el-button>
        </el-col>
      </el-row>
    </Portlet>
    <Portlet>
      <el-row>
        <el-col :span="6">
          <el-form-item label="货物处理:" v-if="abnromalSouce == '1'"
                        prop="orderIsStorage"
                        :rules="[{ required: true, message: '请选择货物处理！', trigger: 'change' }]"
          >
            <el-select v-model="model.orderIsStorage"
                       placeholder="请选择">
              <el-option label="异常完结后入库" :value="1"></el-option>
              <el-option label="异常完结后不入库" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="text-align: center">
          <span v-if="abnromalSouce == '1'" style="color: #FF0000;line-height: 45px">请确认异常处理完毕，货物是否入库后完结异常。</span>
          <span v-if="abnromalSouce == '2'"
                style="color: #FF0000;line-height: 45px">请确认异常处理完毕后完结异常，异常完结前该子服务订单不可签收。</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8" :offset="10">
          <el-button type="primary" :loading="loading" @click="confirmAbnormal('1')"> 保 存 </el-button>
          <el-button type="success" @click="confirmAbnormal('2')">异常完结</el-button>
        </el-col>
      </el-row>
    </Portlet>
  </el-form>
</template>

<script>
// import Portlet from '@/components/base/Portlet'
import {getSubDictListOfParentCode} from '@/utils/selectOptions'
import {confirm, copy, dotData} from '@/utils'
import {isFormatNumber} from '@/utils/validate'
export default {
  name: 'AbnormalOperation',
  components: {
  },
  props: {
    id: {
      type: String,
      required: true
    },
    detail: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      model: {
        chAbnormalSchemes: [{
          abnormalSchemeCode: '',
          abnormalRemark: ''
        }],
        abnormalCosts: [
          {
            costNo: '',
            costMoney: '',
            costRemark: ''
          }
        ],
        orderIsStorage: ''
      },
      abnormalSchemeCodeArr: [],
      abnormalCostsArr: [],
      loading: false,
      rules: {}
    }
  },
  created() {
    getSubDictListOfParentCode('ABNORMALSCHEME').then(arr => {
      this.abnormalSchemeCodeArr = arr || []
    })
    getSubDictListOfParentCode('ABNORMALCOST').then(arr => {
      this.abnormalCostsArr = arr || []
    })
  },
  computed: {
    abnromalSouce() {
      return dotData(this.detail, 'chAbnormal.abnromalSouce')
    }
  },
  watch: {
    detail(val, oldVal) {
      if (!val.abnormalCosts.length) {
        return
      }
      let data = copy(val, true)
      this.model.chAbnormalSchemes = data.chAbnormalSchemes
      this.model.abnormalCosts = data.abnormalCosts
      this.model.orderIsStorage = data.chAbnormal.orderIsStorage
    }
  },
  methods: {
    isFormatNumber,
    add() {
      this.model.chAbnormalSchemes.push({})
    },
    del(arr, index) {
      if (arr.length <= 1) {
        return
      }
      arr.splice(index, 1)
    },
    addFee() {
      this.model.abnormalCosts.push({})
    },
    delFee(arr, index) {
      if (arr.length <= 1) {
        return
      }
      arr.splice(index, 1)
    },
    confirmAbnormal(val) {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return
        }
        let data = copy(this.model, true)
        data.abnormalId = this.id
        data.oppType = val
        let note = (this.abnromalSouce === 1) ? '<p>是否确认完结本异常？</p><p>完结后异常包件将按照您的选择入库/不入库</p>' : '<p>是否确认完结本异常？</p>'
        if (val === '2') { // 完结
          confirm(note, '异常完结', {
            type: 'warning',
            dangerouslyUseHTMLString: true,
            confirmButtonLoading: true,
            confirmCallBack: ({confirmButtonLoadingClose, close}) => {
              this.$ajax.post('/ms-warehouse-order/orderAbnormal/saveOrUpdateAbnormal', data).then(response => {
                if (response.success) {
                  close()
                  this.$message({
                    type: 'success',
                    message: '异常完结成功！'
                  })
                  this.$emit('refresh')
                } else {
                  confirmButtonLoadingClose()
                }
              }).finally(_ => {
                confirmButtonLoadingClose()
              })
            }
          })
        } else {
          this.loading = true
          this.$ajax.post('/ms-warehouse-order/orderAbnormal/saveOrUpdateAbnormal', data).then(response => {
            this.loading = false
            if (response.success) {
              this.$message({
                type: 'success',
                message: '保存成功！'
              })
              this.$emit('refresh')
            }
          })
        }
      })
    }
  }
}
</script>
